<template>
  <div class="leftSlide">
    <div class="main"></div>
    <div class="main">
      <h1>渐入渐出</h1>
      <h1 :class="{none:a<=0,none1:a>=0, animate__animated:a>0,animate__fadeInDown:a>0}">111111111</h1>
      <h1 :class="{none:a<=1,none1:a>=1, animate__animated:a>1,animate__fadeInDown:a>1}">2222222222</h1>
      <h1 :class="{none:a<=2,none1:a>=2, animate__animated:a>2,animate__fadeInDown:a>2}">33333333</h1>
    </div>
    <div class="main"></div>
    <div class="main"></div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      a: -1
    }
  },
  watch: {
    inites (newVal) {
      if (newVal) {
        this.init()
      } else {
        this.outit()
      }
    }
  },
  methods: {
    add () {
      this.a = !this.a
    },
    init () {
      var vm = this;
      setInterval(() => {
        vm.a++
      }, 200)
    },
    outit () {
      this.a = -1
    }
  },
  computed: {
    inites () {
      return this.$store.state.init
    }
  },
  mounted () {
  }
}
</script>
<style lang="less" scoped>
.leftSlide {
  width: 96%;
  height: calc(100% - 60px);
  margin: 2%;
  padding-bottom: 2000px;
  .main {
    width: 100%;
    height: 100%;
    border: 1px solid #000;
    box-sizing: border-box;
    text-align: center;
    background: rgba(0, 0, 0, 0.2);
    h1 {
      padding: 20px 0;
    }
  }
  h1 {
    font-size: 60px;
  }
  .none {
    transition: all 0.6s;
    opacity: 0;
  }
  .none1 {
    font-size: 60px;
    background-image: linear-gradient(135deg, red, blue);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
  }
}
</style>